<template>
    <view class="contai">
        <view class="title">
            便捷转让，即转即收益
        </view>
        <view class="_frominp">

            <form @submit="formSubmit" @reset="formReset">
                <view class="inplist">
                    <text>小区名称</text>
                    <input name="s_name" placeholder="输入小区名称" />
                </view>
                <view class="inplist">
                    <text>房屋面积</text>
                    <input name="area" placeholder="输入面积" />
                </view>
                <view class="inplist">
                    <text>现有房型</text>
                    <input name="room_types" placeholder="输入房型" />
                </view>
                <view class="inplist">
                    <text>房屋租金</text>
                    <input name="lease_priec" placeholder="输入金额" />
                </view>
                <view class="inplist">
                    <text>房屋押金</text>
                    <input name="deposit_priec" placeholder="输入押金" />
                </view>
                <view class="inplist">
                    <text>付款方式</text>
                    <input name="lease_mode" placeholder="押几付几" />
                </view>

                <view class="inplist" v-if="parseInt(type)===3">
                    <text>期望佣金</text>
                    <input name="lease_mode" placeholder="期望佣金金额" />
                </view>

                <view class="inplist" v-if="parseInt(type)===2">
                    <text>剩余租期</text>
                    <input name="surplus_date" placeholder="几年几月" />
                </view>
                <view class="inplist" v-if="parseInt(type)===2">
                    <text>利润差价</text>
                    <input name="profit_difference" placeholder="利润差价情况" />
                </view>
                <view class="inplist">
                    <text>位置优势</text>
                    <input name="advantage" placeholder="交通情况位置优势" />
                </view>
                <view class="inplist" v-if="parseInt(type)===2">
                    <text>转让费用</text>
                    <input name="trustee_price" placeholder="输入金额" />
                </view>
                <view class="inplist">
                    <text>物品情况</text>
                    <input name="Item" placeholder="我的物品家具家电" />
                </view>
                <view class="inplist">
                    <text>联系方式</text>
                    <input name="tel" placeholder="请输入手机号码" />
                </view>
                <view class="textfrom">
                    房屋照片(请上传)
                </view>
                <u-gap height="5"></u-gap>
                <u-upload
                        :fileList="houseImgList"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="house"
                        multiple
                ></u-upload>
                <view class="">
                    备注说明(选填)
                </view>
                <view class="fwbtext">
                    <u--textarea v-model="remark" placeholder="如房子情况,房东租客情况,注意事项等" border="none"></u--textarea>
                </view>
                <view>
                    <button style="width: 100%;height: 70rpx; font-size: 14px;background-color: #FF9900;
					border-radius: 30rpx;" form-type="submit">提交</button>
                    <!-- <button type="default" form-type="reset">Reset</button> -->
                </view>
            </form>
        </view>
        <view class="safe-area-inset-bottom"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                houseImgList: [],
                remark: '',
                type: '',
            }
        },
        onLoad(options){
            this.type = options.type;
        },
        methods: {
            // 删除图片
            deletePic(event) {
                this[`${event.name}ImgList`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`${event.name}ImgList`].length
                lists.map((item) => {
                    this[`${event.name}ImgList`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`${event.name}ImgList`][fileListLen]
                    this[`${event.name}ImgList`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                let server = this.$url + '/api.php/index/file_update';
                return new Promise((resolve, reject) => {
                    let a = uni.uploadFile({
                        url: server,
                        filePath: url,
                        name: 'image[]',
                        success: (res) => {
                            let resp = JSON.parse(res.data);
                            setTimeout(() => {
                                resolve(resp.data.img_url[0]);
                            }, 1000)
                        }
                    });
                })
            },

            formSubmit: function(e) {
                let data = uni.$u.deepClone(e.detail.value);
                data.type = this.type;
                data.u_id = uni.getStorageSync('u_id');
                data.remark = this.remark;
                data.img = this.houseImgList.join();

                uni.showLoading({title: '正在发布'});
                uni.$u.http.post('/api.php/house/real_house', data).then(res => {
                    uni.hideLoading();
                    uni.$u.toast('添加成功');
                    uni.navigateBack({delta: 1});
                });

            },
        }
    }
</script>

<style lang="scss">
    .contai {
        width: 750rpx;
        background-image: url(http://img1.cache.netease.com/catchpic/D/DE/DE0405E4ECDCCA7F88A86C0677CE2018.jpg);
        background-size: cover;
        overflow: hidden;

        ._frominp {
            width: 80%;
            height: 100%;
            background-color: white;
            margin: 0 auto;
            padding: 20rpx;
            border-radius: 5px;
            .fwbtext{
                width: 100%;
                height: 250rpx;
                margin-top: 20rpx;
                margin-bottom: 20rpx;
                border: 1px solid #C0C0C0;
                overflow: hidden;
                // background-color: red;
            }
            .inplist{
                width: 100%;
                height: 70rpx;
                // background-color: gray;
                margin-bottom: 20rpx;
                border-bottom: 1px solid #e5e5e5;
                input{
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 14px;
                    float: right;
                    // background-color: red;
                    width: 380rpx;
                    height: 70rpx;
                    color: black;
                }
                text{
                    display: inline-block;
                    width: 150rpx;
                    height: 70rpx;
                    // background-color: red;
                    line-height: 70rpx;
                }
            }
        }

        .title {
            width: 50%;
            height: 50rpx;
            background-color: #C0C0C0;
            margin: 0 auto;
            margin-top: 30rpx;
            margin-bottom: 30rpx;
            text-align: center;
            color: white;
            font-weight: 600;
            line-height: 50rpx;
        }

        // .uni-form-item .title {
        // 	padding: 20rpx 0;
        // }
    }
</style>
